<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记账本系统</title>
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            margin: 0;
            display: flex;
            background-color: #f8f9fa;
        }

        .sidebar {
            width: 220px;
            background-color: #343a40;
            padding-top: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .sidebar button {
            display: block;
            width: 100%;
            padding: 15px 20px;
            text-align: left;
            background-color: transparent;
            border: none;
            color: #ced4da;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 16px;
        }

        .sidebar button:hover {
            background-color: #495057;
        }

        .sidebar button.active {
            background-color: #6c757d;
        }

        .main-content {
            flex: 1;
            padding: 30px;
        }

        .tab-content {
            display: none;
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 25px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: left;
        }

        th {
            background-color: #e9ecef;
        }

        button {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-btn {
            background-color: #28a745;
            color: white;
        }

        .add-btn:hover {
            background-color: #218838;
        }

        .edit-btn {
            background-color: #ffc107;
            color: white;
        }

        .edit-btn:hover {
            background-color: #e0a800;
        }

        .delete-btn {
            background-color: #dc3545;
            color: white;
        }

        .delete-btn:hover {
            background-color: #c82333;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 25px;
            border: 1px solid #888;
            width: 35%;
            border-radius: 10px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 30px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 搜索框样式 */
        .search-input {
            padding: 10px;
            margin-right: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <button class="tablinks" onclick="openTab(event, 'Home')">首页</button>
        <button class="tablinks" onclick="openTab(event, 'IncomeManagement')">收入管理</button>
        <button class="tablinks" onclick="openTab(event, 'ExpenseManagement')">支出管理</button>
        <button class="tablinks" onclick="openTab(event, 'CategoryManagement')">分类管理</button>
        <button class="tablinks" onclick="openTab(event, 'Statistics')">数据统计</button>
    </div>
    <div class="main-content">
        <div id="Home" class="tab-content">
            <h2>首页</h2>
            <p>欢迎使用记账本系统，您可以通过左侧导航栏选择不同的功能模块进行操作。</p>
        </div>
        <div id="IncomeManagement" class="tab-content">
            <h2>收入管理</h2>
            <input type="text" class="search-input" id="incomeSearch" placeholder="搜索收入来源" oninput="searchIncomes()">
            <button class="add-btn" onclick="openAddIncomeModal()">添加收入</button>
            <table id="incomeTable">
                <thead>
                    <tr>
                        <th>收入来源</th>
                        <th>收入金额</th>
                        <th>收入日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="ExpenseManagement" class="tab-content">
            <h2>支出管理</h2>
            <input type="text" class="search-input" id="expenseSearch" placeholder="搜索支出项目" oninput="searchExpenses()">
            <button class="add-btn" onclick="openAddExpenseModal()">添加支出</button>
            <table id="expenseTable">
                <thead>
                    <tr>
                        <th>支出项目</th>
                        <th>支出金额</th>
                        <th>支出日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="CategoryManagement" class="tab-content">
            <h2>分类管理</h2>
            <input type="text" class="search-input" id="categorySearch" placeholder="搜索分类名称" oninput="searchCategories()">
            <button class="add-btn" onclick="openAddCategoryModal()">添加分类</button>
            <table id="categoryTable">
                <thead>
                    <tr>
                        <th>分类名称</th>
                        <th>分类类型</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="Statistics" class="tab-content">
            <h2>数据统计</h2>
            <p>总收入: <span id="totalIncome">0</span></p>
            <p>总支出: <span id="totalExpense">0</span></p>
            <p>净收入: <span id="netIncome">0</span></p>
        </div>
    </div>

    <!-- 收入添加/编辑模态框 -->
    <div id="incomeModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeIncomeModal()">&times;</span>
            <h2 id="incomeModalTitle">添加收入</h2>
            <label for="incomeSource">收入来源:</label>
            <input type="text" id="incomeSource" required><br>
            <label for="incomeAmount">收入金额:</label>
            <input type="number" id="incomeAmount" required><br>
            <label for="incomeDate">收入日期:</label>
            <input type="date" id="incomeDate" required><br>
            <button onclick="saveIncome()">保存</button>
        </div>
    </div>

    <!-- 支出添加/编辑模态框 -->
    <div id="expenseModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeExpenseModal()">&times;</span>
            <h2 id="expenseModalTitle">添加支出</h2>
            <label for="expenseItem">支出项目:</label>
            <input type="text" id="expenseItem" required><br>
            <label for="expenseAmount">支出金额:</label>
            <input type="number" id="expenseAmount" required><br>
            <label for="expenseDate">支出日期:</label>
            <input type="date" id="expenseDate" required><br>
            <button onclick="saveExpense()">保存</button>
        </div>
    </div>

    <!-- 分类添加/编辑模态框 -->
    <div id="categoryModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeCategoryModal()">&times;</span>
            <h2 id="categoryModalTitle">添加分类</h2>
            <label for="categoryName">分类名称:</label>
            <input type="text" id="categoryName" required><br>
            <label for="categoryType">分类类型:</label>
            <select id="categoryType">
                <option value="收入">收入</option>
                <option value="支出">支出</option>
            </select><br>
            <button onclick="saveCategory()">保存</button>
        </div>
    </div>

    <script>
        let currentIncomeIndex = null;
        let currentExpenseIndex = null;
        let currentCategoryIndex = null;

        // 初始化表格
        function initTables() {
            // 收入管理
            let incomes = JSON.parse(localStorage.getItem('incomes')) || [
                { source: '工资', amount: 5000, date: '2025-03-01' },
                { source: '奖金', amount: 2000, date: '2025-03-05' },
                { source: '兼职收入', amount: 1000, date: '2025-03-10' },
                { source: '投资收益', amount: 500, date: '2025-03-15' },
                { source: '租金收入', amount: 1500, date: '2025-03-20' },
                { source: '稿费', amount: 300, date: '2025-03-22' },
                { source: '红包收入', amount: 200, date: '2025-03-25' },
                { source: '利息收入', amount: 100, date: '2025-03-28' },
                { source: '退款收入', amount: 400, date: '2025-03-30' },
                { source: '其他收入', amount: 150, date: '2025-03-31' }
            ];
            localStorage.setItem('incomes', JSON.stringify(incomes));
            let incomeTable = document.getElementById('incomeTable').getElementsByTagName('tbody')[0];
            incomeTable.innerHTML = '';
            incomes.forEach((income, index) => {
                let row = incomeTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = income.source;
                cell2.innerHTML = income.amount;
                cell3.innerHTML = income.date;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditIncomeModal(${index})">编辑</button><button class="delete-btn" onclick="deleteIncome(${index})">删除</button>`;
            });

            // 支出管理
            let expenses = JSON.parse(localStorage.getItem('expenses')) || [
                { item: '餐饮', amount: 800, date: '2025-03-02' },
                { item: '购物', amount: 1200, date: '2025-03-07' },
                { item: '交通', amount: 300, date: '2025-03-12' },
                { item: '娱乐', amount: 500, date: '2025-03-17' },
                { item: '房租', amount: 2000, date: '2025-03-20' },
                { item: '水电费', amount: 200, date: '2025-03-23' },
                { item: '话费', amount: 100, date: '2025-03-26' },
                { item: '医疗', amount: 300, date: '2025-03-29' },
                { item: '学习', amount: 400, date: '2025-03-30' },
                { item: '其他支出', amount: 150, date: '2025-03-31' }
            ];
            localStorage.setItem('expenses', JSON.stringify(expenses));
            let expenseTable = document.getElementById('expenseTable').getElementsByTagName('tbody')[0];
            expenseTable.innerHTML = '';
            expenses.forEach((expense, index) => {
                let row = expenseTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = expense.item;
                cell2.innerHTML = expense.amount;
                cell3.innerHTML = expense.date;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditExpenseModal(${index})">编辑</button><button class="delete-btn" onclick="deleteExpense(${index})">删除</button>`;
            });

            // 分类管理
            let categories = JSON.parse(localStorage.getItem('categories')) || [
                { name: '工资收入', type: '收入' },
                { name: '奖金收入', type: '收入' },
                { name: '餐饮支出', type: '支出' },
                { name: '购物支出', type: '支出' },
                { name: '交通支出', type: '支出' },
                { name: '娱乐支出', type: '支出' },
                { name: '房租支出', type: '支出' },
                { name: '水电费支出', type: '支出' },
                { name: '话费支出', type: '支出' },
                { name: '医疗支出', type: '支出' }
            ];
            localStorage.setItem('categories', JSON.stringify(categories));
            let categoryTable = document.getElementById('categoryTable').getElementsByTagName('tbody')[0];
            categoryTable.innerHTML = '';
            categories.forEach((category, index) => {
                let row = categoryTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                cell1.innerHTML = category.name;
                cell2.innerHTML = category.type;
                cell3.innerHTML = `<button class="edit-btn" onclick="openEditCategoryModal(${index})">编辑</button><button class="delete-btn" onclick="deleteCategory(${index})">删除</button>`;
            });

            // 更新数据统计
            let totalIncome = incomes.reduce((sum, income) => sum + income.amount, 0);
            let totalExpense = expenses.reduce((sum, expense) => sum + expense.amount, 0);
            let netIncome = totalIncome - totalExpense;
            document.getElementById('totalIncome').textContent = totalIncome;
            document.getElementById('totalExpense').textContent = totalExpense;
            document.getElementById('netIncome').textContent = netIncome;
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tab-content');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tablinks');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 收入管理
        function openAddIncomeModal() {
            currentIncomeIndex = null;
            document.getElementById('incomeModalTitle').textContent = '添加收入';
            document.getElementById('incomeSource').value = '';
            document.getElementById('incomeAmount').value = '';
            document.getElementById('incomeDate').value = '';
            document.getElementById('incomeModal').style.display = 'block';
        }

        function openEditIncomeModal(index) {
            currentIncomeIndex = index;
            let incomes = JSON.parse(localStorage.getItem('incomes'));
            let income = incomes[index];
            document.getElementById('incomeModalTitle').textContent = '编辑收入';
            document.getElementById('incomeSource').value = income.source;
            document.getElementById('incomeAmount').value = income.amount;
            document.getElementById('incomeDate').value = income.date;
            document.getElementById('incomeModal').style.display = 'block';
        }

        function closeIncomeModal() {
            document.getElementById('incomeModal').style.display = 'none';
        }

        function saveIncome() {
            let incomes = JSON.parse(localStorage.getItem('incomes')) || [];
            let source = document.getElementById('incomeSource').value;
            let amount = parseInt(document.getElementById('incomeAmount').value);
            let date = document.getElementById('incomeDate').value;
            if (currentIncomeIndex === null) {
                incomes.push({ source, amount, date });
            } else {
                incomes[currentIncomeIndex] = { source, amount, date };
            }
            localStorage.setItem('incomes', JSON.stringify(incomes));
            initTables();
            closeIncomeModal();
        }

        function deleteIncome(index) {
            let incomes = JSON.parse(localStorage.getItem('incomes')) || [];
            incomes.splice(index, 1);
            localStorage.setItem('incomes', JSON.stringify(incomes));
            initTables();
        }

        // 支出管理
        function openAddExpenseModal() {
            currentExpenseIndex = null;
            document.getElementById('expenseModalTitle').textContent = '添加支出';
            document.getElementById('expenseItem').value = '';
            document.getElementById('expenseAmount').value = '';
            document.getElementById('expenseDate').value = '';
            document.getElementById('expenseModal').style.display = 'block';
        }

        function openEditExpenseModal(index) {
            currentExpenseIndex = index;
            let expenses = JSON.parse(localStorage.getItem('expenses'));
            let expense = expenses[index];
            document.getElementById('expenseModalTitle').textContent = '编辑支出';
            document.getElementById('expenseItem').value = expense.item;
            document.getElementById('expenseAmount').value = expense.amount;
            document.getElementById('expenseDate').value = expense.date;
            document.getElementById('expenseModal').style.display = 'block';
        }

        function closeExpenseModal() {
            document.getElementById('expenseModal').style.display = 'none';
        }

        function saveExpense() {
            let expenses = JSON.parse(localStorage.getItem('expenses')) || [];
            let item = document.getElementById('expenseItem').value;
            let amount = parseInt(document.getElementById('expenseAmount').value);
            let date = document.getElementById('expenseDate').value;
            if (currentExpenseIndex === null) {
                expenses.push({ item, amount, date });
            } else {
                expenses[currentExpenseIndex] = { item, amount, date };
            }
            localStorage.setItem('expenses', JSON.stringify(expenses));
            initTables();
            closeExpenseModal();
        }

        function deleteExpense(index) {
            let expenses = JSON.parse(localStorage.getItem('expenses')) || [];
            expenses.splice(index, 1);
            localStorage.setItem('expenses', JSON.stringify(expenses));
            initTables();
        }

        // 分类管理
        function openAddCategoryModal() {
            currentCategoryIndex = null;
            document.getElementById('categoryModalTitle').textContent = '添加分类';
            document.getElementById('categoryName').value = '';
            document.getElementById('categoryType').value = '收入';
            document.getElementById('categoryModal').style.display = 'block';
        }

        function openEditCategoryModal(index) {
            currentCategoryIndex = index;
            let categories = JSON.parse(localStorage.getItem('categories'));
            let category = categories[index];
            document.getElementById('categoryModalTitle').textContent = '编辑分类';
            document.getElementById('categoryName').value = category.name;
            document.getElementById('categoryType').value = category.type;
            document.getElementById('categoryModal').style.display = 'block';
        }

        function closeCategoryModal() {
            document.getElementById('categoryModal').style.display = 'none';
        }

        function saveCategory() {
            let categories = JSON.parse(localStorage.getItem('categories')) || [];
            let name = document.getElementById('categoryName').value;
            let type = document.getElementById('categoryType').value;
            if (currentCategoryIndex === null) {
                categories.push({ name, type });
            } else {
                categories[currentCategoryIndex] = { name, type };
            }
            localStorage.setItem('categories', JSON.stringify(categories));
            initTables();
            closeCategoryModal();
        }

        function deleteCategory(index) {
            let categories = JSON.parse(localStorage.getItem('categories')) || [];
            categories.splice(index, 1);
            localStorage.setItem('categories', JSON.stringify(categories));
            initTables();
        }

        // 搜索功能
        function searchIncomes() {
            let input = document.getElementById('incomeSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('incomeTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        function searchExpenses() {
            let input = document.getElementById('expenseSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('expenseTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        function searchCategories() {
            let input = document.getElementById('categorySearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('categoryTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 页面加载完成后初始化表格
        window.onload = function () {
            initTables();
            openTab(event, 'Home');
        };
    </script>
</body>

</html>